<template>
  <div class="home">
    <my-header class="titile"></my-header>
    <div class="content"><paging-header></paging-header></div>
    <div class="section">
      <section>
        <box-headers>Sort by: Default Price</box-headers>
        <div class="page">
          <page></page>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import myHeader from "@/components/home/header";
import pagingHeader from "@/components/home/paging"
import boxHeaders from "@/components/home/section/header"
import  page   from "@/components/home/section/page/index"
export default {
  name: '',
  props: {},
  data() {
    return {};
  },
  // 子组件转换
  components: {myHeader,pagingHeader,boxHeaders,page},
  // 数据引入
  mounted() {
  },
  created() {
  },
  //点击函数事件
  methods: {},
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
.home{
  width: 100vw;
  font-size: .16rem;
  .titile{
    width: 80vw;
    margin: 0 auto;
  }
  .content{
    width: 100vw;
    background: #F0F0F0;
    padding: 1vw 78vw 1vw 5vw;
  }
  .section{
    width: 100vw;
    background: #F5F7FB;
    padding:4vw 1vw 4vw 1vw;
    .page{
      width: 80vw;
      margin: .4rem auto;
    }
  }
}
</style>